<template>

</template>

<script setup lang="ts">
import {reactive, readonly, shallowReadonly} from "vue";

  const person = ref<object>({
    name: "person",
    age: 30
  })
// 整体不能修改
  const person1 = readonly(person);
  const car = reactive<object>({
    brand: '五菱宏光',
    option: {
      color: '红色'
    }
  })
// 只有第一层不能修改
  const car2 = shallowReadonly(car);

  // 关注发生整体的改变
  function changePerson() {
    person.value = {name : 'tony', age: 30};
  }
</script>

<style scoped>

</style>

<script lang="ts">
export default {
  name: "MyTest10.vue"
}
</script>